<template>
    <!-- 1.v-text 显示‘内置指令’ -->
    <p v-text="Text"></p>
    <!-- 2.v-html 显示‘这是张宇的页面’ -->
    <p v-html="Text2"></p>
    <!-- 3.v-bind 显示 一张图片 -->
    <img :src="url" class="img1" v-show="flag">
    <!-- 4.v-on 按钮 点击替换图片 -->
    <button @click="Change">点击替换图片</button>
    <!-- 5.v-model 姓名：input 以上这是郭惠宇完成的效果 -->
    <p>姓名：<input type="text" v-model="user" v-if="user == ''"><br>以上这是{{ user }}完成的效果</p>
    <!-- 6.v-if 点击按钮切换成名字加学号 -->
    <button @click="user = '张宇+2430150140'">点击后切换成名字加学号</button>
    <!-- 7.v-show 点击后隐藏图片 -->
    <br>
    <button @click="flag = !flag">显示或者隐藏</button>
    <!-- 8. -->
    <p v-for="(item, index) in arr" :key="index">
        索引值：{{ index }}---元素的内容是：{{ item }}
    </p>
</template>
<script setup>
import { ref } from 'vue'
const Text = '内置指令';
const Text2 = '<b>这是王玺的页面</b>';
let url = ref(new URL("../assets/img4.png", import.meta.url).href);
const Change = () => {
    url.value = new URL("../assets/img3.png", import.meta.url).href;
}
const user = ref('');
let flag = ref(true);
const arr = ["v-text", "v-html", "v-bind", "v-on", "v-model", "v-if", "v-show", "v-for"]


</script>
<style scoped>
.img1 {
    width: 500px;
}
</style>